<template>
  <Block :title="`${tableData.length}连板记录`">
    <atom-stock-list
      :tableLayout="3"
      :table-data="tableData"
      :tags-option="{
        tagsable: true,
        fullWidth: true,
      }"
      ref="atomStockList"
      :columns="columns"
      @sortChange="sortChange"
    >
      <template #body-limitupDate="{ row }">
        <div class="limitup-date">
          <span>{{ row.limitupDate }}</span>
          <atom-tag type="minor-fill" class="minor" color="red">{{ row.wkb===0?'开板':'未开板' }}</atom-tag>
        </div>
      </template>
      <template #tagsRowRender="{ row }">
        <div class="tag-row-wrap">涨停原因：{{ row.reason }}</div>
      </template>
    </atom-stock-list>
  </Block>
</template>

<script>
import sortDataMixins from '@/mixins/sortDataMixins.js';
import Block from '@/components/common/Block.vue';
import { plateHistoryColumn } from '@/scripts/tableColumn.js';
export default {
  mixins: [sortDataMixins],
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    Block,
  },
  data() {
    return {
      columns: JSON.parse(JSON.stringify(plateHistoryColumn)),
    };
  },
  methods: {
    sortChange(params) {
      this.sortData(this.columns, 'tableData', params);
    },
  },
};
</script>
<style lang="less" scoped>
.tag-row-wrap {
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: var(--text-7);
  letter-spacing: 0;
  line-height: 36px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.limitup-date {
  display: flex;
  flex-direction: column;

  .minor {
    width: fit-content;
  }
}
.block {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  padding: 28px 32px 0;
}
/deep/.atom-stock-list-header__left-wrap,
/deep/.atom-stock-list-body__left-wrap {
  padding-left: 0 !important;
  width: 0 !important;
}
/deep/ .atom-stock-list-header__center-wrap {
  width: 100% !important;
  .atom-stock-list-header__center {
    padding-right: 0 !important;
    width: 100% !important;
  }
}
/deep/ .atom-stock-list-header-cell {
  &:nth-child(1) {
    width: 294px !important;
  }
  &:nth-child(2) {
    margin-left: 8px !important;
    width: 134px !important;
  }
  &:nth-child(3) {
    margin-left: 8px !important;
    width: 242px !important;
  }
}
/deep/ .atom-stock-list-body-cell {
  &:nth-child(1) {
    width: 294px !important;
  }
  &:nth-child(2) {
    margin-left: 8px !important;
    width: 134px !important;
  }
  &:nth-child(3) {
    margin-left: 8px !important;
    width: 242px !important;
  }
}
/deep/.atom-stock-list-body__center-wrap {
  width: 100% !important;
  .atom-stock-list-body__center {
    width: 100% !important;
    padding-right: 0 !important;
  }
}
</style>
